<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Transition Chaining</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>



</head>

<body>

<script type="text/javascript">
    var body = d3.select("body");
    var i = "1";
    function teleport(s) {
        s.transition().duration(300) // <-A
            .style("width", "200px")
            .style("height", "1px")
            .transition().duration(100) // <-B
            .style("left", "600px")
            .transition().duration(300) // <-C
            .style("left", "800px")
            .style("height", "80px")
            .style("width", "80px")
            .transition().duration(300)
            .style("left", "680px")
            .style("height", "1px")
            .style("width", "200px")
            .style("top", "80px")
            .transition().duration(100)
            .style("left", "10px")
            .transition().duration(300)
            .style("height", "80px")
            .style("width", "80px")
            .style("top", "10px");

    }

    body.append("div")
        .attr("class", "dong")
        .style("position", "fixed")
        .style("background-color", "steelblue")
        .style("left", "10px")
        .style("width", "80px")
        .style("height", "80px")
//        .call(teleport)
        .append("span")
        .style("position","absolute")
        .style("width","100%")
        .style("text-align","center")
        .style("line-height","100%")
//        .style("display","block")     //晚上再搞！
        .text(i); // <-D

//    setInterval(function () {
//        d3.select(".dong").call(teleport);
//    }, 5000)
</script>

</body>

</html>